<style>
</style>

<template>
<div>
	<div style="max-width:360px;" long center>
		<p mgt6 text-center>
			<img :src="footer.websiteInfo.logo" h4>
		</p>
		<p mgt4 text-center sz4>注册</p>
		<Form ref="registerform" :rules="rules" :model="registerModel" mgt5>
			<FormItem prop="userName">
				<Input v-model="registerModel.userName" size="large" placeholder="用户名*"></Input>
			</FormItem>
			<FormItem prop="password">
				<Input v-model="registerModel.password" :type="showPassword?'text':'password'" size="large" placeholder="需字母、数字、大写字符、特殊字符，不低于8位">
					<Icon type="md-eye" slot="suffix" title="" @click="handleShowPassword(true)" linkable :blue="showPassword" />
				</Input>
			</FormItem>
			<Divider mgt5 gray3>补全资料</Divider>
			<FormItem prop="name">
				<Input v-model="registerModel.name" size="large" placeholder="姓名"></Input>
			</FormItem>
			<FormItem prop="phoneNumber">
				<Input v-model="registerModel.phoneNumber" size="large" placeholder="手机号"></Input>
			</FormItem>
			<FormItem prop="emailAddress">
				<Input v-model="registerModel.emailAddress" size="large" placeholder="邮箱"></Input>
			</FormItem>
		</Form>
		<p mgt2 gray3>
			<Checkbox v-model="isAgreed"></Checkbox>
			<span>我已阅读并接受</span>
			<router-link :to="{name:'user-agreement'}">《会员注册协议》</router-link>
		</p>
		<p mgt3>
			<Button type="primary" size="large" @click="register" long ht3 :disabled="!isAgreed">提交</Button>
		</p>
		<p mgt4>
			<Button type="text" size="large" long ht3 blue :to="{name: 'login'}">立即登陆</Button>
		</p>
	</div>
</div>
</template>
<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import { passwordValidator } from '@common/lib/validates'

@Component
export default class IndexRegister extends AbpBase {
	registerModel={
		userName:'',
		emailAddress: '',
		name: '',
		phoneNumber: '',
		password:''
	}
	showPassword:Boolean = false;
	isAgreed:Boolean = false;
	get footer() {
		return this.$store.state.websiteInfo.homeFooter;
	}
	async register(){
		(this.$refs.registerform as any).validate(async (valid:boolean)=>{
			if(valid){
				this.$Message.loading({
					content: '正在注册',
					duration:0
				});
				var response = await this.post('Member/Register', this.registerModel);
				this.$Message.destroy();
				if(response.success) {
					this.$router.push({ name: 'login' });
				}
			}
		});      
	}
	handleShowPassword() {
		this.showPassword = !this.showPassword;
	}
	get rules() {
		return {
			userName: [
				{ required: true, message: '必须填写用户名', trigger: 'blur' }
			],
			password: [
				{ required: true, validator: passwordValidator, trigger: 'blur' }
			],
			emailAddress: [
                { type: 'email', message: '错误的邮箱格式' }
            ]
		}
	}
}
</script>